<template>
  <el-card>
    <div style="float:left;margin:10px 0;">
      <el-input v-model.trim="params.keyword" placeholder="姓名/手机号" clearable style="width:200px;"
                @keyup.enter.native="search"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <el-table :data="tableData" border>
      <el-table-column label="姓名" prop="name" min-width="160"></el-table-column>
      <el-table-column label="交易金额" prop="amount" min-width="120"></el-table-column>
      <el-table-column label="类型" prop="type" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 1" class="enable-status">充值</span>
          <span v-if="scope.row.type === 2" class="disable-status">套餐消费</span>
        </template>
      </el-table-column>
      <el-table-column label="交易时间" prop="create_time" min-width="180"></el-table-column>
    </el-table>

    <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows" :page-count="6"
                   :total="total" @current-change="searchPage"></el-pagination>

  </el-card>
</template>

<script>

    import api from '../../../utils/api';

    export default {
        name: "AccountDetail",
        data() {
            return {
                params: {
                    rows: 10,
                    page: 1,
                    keyword: null,
                },
                total: 0,
                tableData: [],

            }
        },
        methods: {
            search() {
                this.searchPage(1);
            },
            searchPage(page) {
                var that = this;
                that.params.page = page;
                api.ajax.get('/account/page/' + that.params.rows + '/' + that.params.page + '?keyword=' + that.params.keyword).then((result) => {
                    var data = result.data;
                    that.tableData = data.list;
                    that.total = data.total;
                }, function (result) {
                    that.$alert("获取账户交易列表异常", '失败!');
                })
            },
        },
        activated() {
            this.search();
        },
        created() {
        }
    }
</script>

<style scoped>

</style>
